/**
 * Created by lixin on 2019-11-21
 */
import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'
/**
 * 由于 app.js 添加的样式文件 在小程序上只能影响 page 样式,不能影响 component 的样式，所以在使用自定义组件时，你可能需要再次引入
 */
import 'taro-ui/dist/style/components/flex.scss'
import {servers} from "../../common/index/options";
import './serverIcon.less'
import {AtToast} from "taro-ui";

export default class ServerIcon extends Component {

  constructor(props) {
    super(props);

    this.state = {
      isOpened:false,
    }
  }

  render() {

    const {isOpened} = this.state;

    return (
      <View className='at-row at-row--wrap at-row__justify--center'>

        {
          servers.map((value, index) => {
            const _key = value.title + index;
            return (
              <View className='at-col at-col-3 server-box' key={_key} onClick={()=>this.setState({isOpened:true})}>
                <Text className='server-icon' style={{background: value.background}}>
                  {value.icon}
                </Text>
                <Text className='server-text'>
                  {value.title}
                </Text>
              </View>
            )
          })
        }
        <AtToast
          isOpened={isOpened}
          status='loading'
          text="正在努力建设中..."
          duration={500}
          onClose={this.onClick}
        />
      </View>
    )
  }
}
